<template>
	<div style="height: 100%;min-width:1700px;color: black">
		<a-layout style="min-width:1700px;height: 100%;">
			<a-layout-content
					style="min-width: 100%;position: relative;background: #ffffff !important;">
				<right-top icon="6.png" text="热点追踪">
					<div style="background-color:#00b14e;color:white;" class="addyj" @click="showWarning" v-cloak
					     v-show="ruleFlag == 1"><span style="margin-left:20px;cursor:pointer;font-size: 14px;">添加预警</span>
					</div>
					<a-tabs default-active-key="1" style="position: absolute;right: 40px;top: 22px;font-weight: 400;" size="small"
					        @change="callback">
						<a-tab-pane key="1" tab="热点总览"></a-tab-pane>
						<a-tab-pane key="2" tab="预警管理" force-render></a-tab-pane>
					</a-tabs>
				</right-top>
				<div class="right-content" v-show="change==1">
					<hotspottrackingechartThreePage></hotspottrackingechartThreePage>
				</div>
				<div class="right-content" v-show="change==2">
					<a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData"
					        style="padding: 0 27px;padding-top: 15px;height: 100px">
						<a-list-item slot="renderItem" key="item.title" slot-scope="item, index"
						             style="border: 1px solid #ddd;margin-bottom: 15px;padding-left: 40px;">
							<a-list-item-meta>
								<button v-if="item.ruleStatus == 1" slot="title"
								        style="background-color: #FF7E16;color: white;position: relative;left: -0.5%;border: none;height: 25px;width: 50px">
									监测中
								</button>
								<button v-else-if="item.ruleStatus == 2" slot="title"
								        style="background-color: #B3B3B3;color: white;position: relative;left: -0.5%;border: none;height: 25px;width: 70px">
									监测完成
								</button>
								<button v-else slot="title"
								        style="background-color: #B3B3B3;color: white;position: relative;left: -0.5%;border: none;height: 25px;width: 50px">
									未监测
								</button>
								<a slot="title" style="font-weight: bold;color: black;"
								   @click="changePageInfo(item.commandId)">{{ item.taskName }}</a>
								<div slot="title" style="position: absolute;right: 1.5%;display: inline-block;">
									<!-- 查看 -->
									<img title="查看" src="../../assets/images/hotspottracking/1.png"
									     style="position: relative;top: calc((100% - 15px) / 2);margin: 0 5px;display: inline-block;cursor: pointer;margin-top: 20%"
									     @click="changePageInfo(item.commandId)"/>
									<!-- 停止 -->
									<img title="删除" src="../../assets/images/hotspottracking/7.png"
									     style="position: relative;top: calc((100% - 15px) / 2);margin: 0 5px;padding: 5px 5px;display: inline-block;cursor: pointer;margin-top: 20%"
									     @click="deleteHotTrackWarning(item.id)"/>
								</div>
							</a-list-item-meta>
							<div style="height: 20px;color: black;">
								<a-col :span="7" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
									关键字：{{ item.warningKeyword }}
								</a-col>
								<a-col :span="7" offset="1" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
									预警平台：{{ item.warningPlatform }}
								</a-col>
								<a-col :span="8" offset="1" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
									<span>预警范围：<span style="padding-right: 2%">{{ item.startTime }}</span> <span>~</span> <span
											style="padding-left: 2%">{{ item.endTime }}</span> </span>
								</a-col>
							</div>
						</a-list-item>
					</a-list>
				</div>
				<a-modal v-model="visible" title="添加预警" width="650px" @ok="hideModal" ok-text="开始监测"
				         style="height:500px" :cancel-button-props="{ style: { display: 'none' } }">
					<warningAdd v-bind:parent="parent" v-bind:warningFlag="warningFlag"></warningAdd>
				</a-modal>
			</a-layout-content>
		</a-layout>
	</div>
</template>

<script>

// 新代码 start
import hotspottrackingechartThreePage from '@/views/videoHotSpot/hotspottrackingechartThreePage.vue'
//新代码 end
import left from './left/index'
import rightTop from './right/top'
import hotspottrackingechart from '@/views/HotSpotTracking/hotspottrackingechart.vue'
import warningAdd from "@/views/videoHotSpot/warningAddThreePage.vue";
import {addWarning, deleteHotTrackWarningAdd, getHotTrackWarningAddList} from '@/api/HotSpotTracking/hotThreePage'

export default {
	name: "hotspottracking",
	components: {
		left,
		rightTop,
		Hotspottrackingechart: hotspottrackingechart,
		warningAdd: warningAdd,
		// 新代码 start
		hotspottrackingechartThreePage,
		//新代码 end
	},
	data() {
		return {
			myChart: null,
			myChart1: null,
			parent: this,
			oneDayunit: undefined,//过去24小时数量单位
			sevenDayunit: undefined,//过去七天数量单位
			nameHeatList1: [], // 近期热搜热度走势 第一天的名称
			nameHeatList2: [],// 近期热搜热度走势 第二天的名称
			nameHeatList3: [],// 近期热搜热度走势 第三天的名称
			nameHeatList4: [],// 近期热搜热度走势 第四天的名称
			nameHeatList5: [],// 近期热搜热度走势 第五天的名称
			nameHeatList6: [],// 近期热搜热度走势 第六天的名称
			nameHeatList7: [],// 近期热搜热度走势 第七天的名称
			oneDayTotalCount: 0,//上侧 过去24小时整体热度
			sevenDayAvgCount: 0,//上侧 过去7天单日热度均值
			heatMovesDay: [],// 近期热搜热度走势 日期
			heatMovesData: [],// 近期热搜热度走势 数据
			startTime: 0,//近期热点事件趋势 起始时间
			endTime: 0,//近期热点事件趋势 结束时间
			eventTrend: [],//近期热点事件趋势
			hotEvent: [],//最高热点事件详情
			hotLastSevenDay: [],//最高热点事件详情
			hotValue: [],//最高热点事件详情
			weibomsg: [],// 近期热搜热度排名TOP10 数据
			typeId: 0,// 近期热搜热度排名TOP10 媒体类型
			beforeDate: [],// 获取前五天日期
			queryDate: "10",//根据日期查询
			user: (JSON.parse(localStorage.getItem('user')) ? JSON.parse(localStorage.getItem('user')) : {
				'realName': "***"
			}), // 当前用户信息
			ruleFlag: 1, // 判断角色是否是普通业务人员角色
			visible: false,
			warningFlag: undefined, //点击添加预警后 根据当前字段清空子组件数据
			loading: true,
			loadingMore: false,
			showLoadingMore: true,
			data: [],
			change: 1,
			listData: [],
			pagination: {
				current: 1,
				onChange: (current, pageSize) => {
					this.pagination.current = current;
					this.pagination.pageSize = pageSize;
					this.searchData();
				},
				onShowSizeChange: (current, pageSize) => {
					this.pagination.current = current;
					this.pagination.pageSize = pageSize;
					this.searchData();
				},
				pageSize: 10,
				total: 0,
				showSizeChanger: true,
				pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
				showTotal: total => `共 ${total}条`,
				showQuickJumper: true
			},
			actions: [
				{type: 'star-o', text: '156'},
				{type: 'like-o', text: '156'},
				{type: 'message', text: '2'},
			],
			mediaFlag: 1,
			mediaStyle: 'background: #1677FF;color: #fff;cursor:pointer;',
			collspanMedia: true,
			total: 0,
			label: '',
			warningForm: {},//添加预警form
			changeSelectStyle: '全部',
			changeSelectStyles: '全部',
			rules: {
				taskName: [
					{required: true, message: '请输入任务名称', trigger: 'blur'},
				],
				warningKeyword: [
					{required: true, message: '请输入预警关键词', trigger: 'blur'},
					{min: 2, max: 10, message: '字数在2-10个之间', trigger: 'blur'},
				],
				warningPlatform: [
					{required: true, message: '请勾选预警平台', trigger: 'blur'},
				],
				rank: [
					{required: true, message: '请选择预警形式', trigger: 'blur'},
				],
			}
		}
	},
	methods: {
		searchData() {
			let param = {
				page: this.pagination.current,
				pageNumber: this.pagination.pageSize,
				orderField: "createTime",
				orderType: 2,
				queryData: {
					"id": 0,
					"taskName": "",
					"warningKeyword": "",
					"warningPlatform": "",
					"rank": 0,
					"startTime": "",
					"endTime": "",
					"warningPush": 0,
					"subscribe": 0,
					"flag": 0,
					"status": "",
					"userId": 0,
					"permissionGroupId": 0,
					"limitNum": 0,
					"ruleStatus": 0,
					"commandId": "",
					"updateTime": ""
				},
			}
			getHotTrackWarningAddList(
					param
			).then(res => {
				this.listData = res.data.records;
				this.pagination.total = res.data.total;
				this.total = res.data.total;
			})
		},
		chart() {
			//第三个图表
			const chart3 = this.$refs.chart3
			if (chart3) {
				const myChart = this.$echarts.init(chart3)
				const option3 = {
					title: {
						text: '近7天趋势(单位/万)',
						left: 'left',

						textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
							fontSize: 15,
							fontStyle: 'normal',
							fontWeight: 'normal',
						},
					},
					xAxis: {
						type: 'category',
						axisLine: {
							lineStyle: {
								color: '#e8ecef',
								width: 1, //这里是为了突出显示加上的
							}
						},
						axisLabel: {
							textStyle: {
								color: 'black',//坐标值得具体的颜色

							}
						},
						data: this.hotLastSevenDay
					},
					yAxis: {
						type: 'value',
						axisLine: {
							lineStyle: {
								color: '#e8ecef',
								width: 1, //这里是为了突出显示加上的
							}
						},
						axisLabel: {
							textStyle: {
								color: 'black',//坐标值得具体的颜色

							}
						},
						splitLine: {
							lineStyle: {
								color: '#e8ecef',
								width: 1, //这里是为了突出显示加上的
							}
						},
					},
					series: [
						{
							data: this.hotValue,
							type: 'line',
							itemStyle: {
								normal: {
									lineStyle: {  //线的颜色
										color: '#ff5b01'
									},
								},
							},
						}
					]
				}
				myChart.setOption(option3)
				window.addEventListener("resize", function () {
					myChart.resize()
				})
			}
		},
		drawScatter() {
			var sdtime4 = new Date().setDate((new Date().getDate() + 1))//7天（改）
			let dd = new Date(new Date().toLocaleDateString())
			var today = new Date(new Date(sdtime4).toLocaleDateString())
			this.myChartScatter = this.$echarts.init(document.getElementById('scatterChart'))
			// 绘制图表
			this.myChartScatter.setOption({
				grid: {
					left: "10%",
					right: "8%",
					bottom: "11%",
				},
				tooltip: {
					trigger: 'item',
					showDelay: 0,
					formatter: function (params) {
						return params.value[2]
					},
				},
				xAxis: {
					min: this.startTime,
					max: this.endTime,
					type: "value",
					splitLine: {
						show: true,
						lineStyle: {
							type: 'dashed'
						}
					},
					maxInterval: 24 * 60 * 60 * 1000,
					axisLabel: {
						interval: 24 * 60 * 60 * 1000,
						formatter: function (params) {
							var oDate = new Date(params);
							var oYear = oDate.getFullYear();
							var oMonth = oDate.getMonth() + 1;
							var oDay = oDate.getDate();
							var oTime = (oMonth) + '-' + (oDay);
							return oTime;
						}
					},
					axisPointer: {
						show: false,
						snap: true,
						label: {
							formatter: function (params) {
								var oDate = new Date(params.value);
								var oYear = oDate.getFullYear();
								var oMonth = oDate.getMonth() + 1;
								var oDay = oDate.getDate();
								var oTime = (oMonth) + '-' + (oDay);
								return oTime;
							},
							precision: 0//文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数。
						}
					},
					axisTick: {
						show: false
					}
				},
				yAxis: {
					splitLine: {
						show: true,
						lineStyle: {
							type: 'dashed'
						}
					},
				},
				series: [
					{
						symbolSize: 12,
						data: this.eventTrend,
						type: 'scatter',
						itemStyle: {
							color: "#5DB5E2"
						}
					}
				]
			})
		},
		//添加預警弹框
		showWarning() {
			this.warningFlag = Math.floor(Math.random() * (100 - 1)) + 1;
			this.visible = true;
		},
		totals() {
			this.$router.push({
				path: '/hotspottrackingoverview',

			})
		},
		// 近期热搜热度排名TOP10
		getIndexMiddle() {
			let param = {
				mediaTypeId: this.typeId,
				searchDate: getyymm(new Date())
			};
			// 近期热搜热度排名TOP10
			statisticsMedia(param).then(res => {
				let hotarr = [];
				let resp = res.data.list;
				for (let i = 0; i < resp.length; i++) {
					hotarr.push({"title": resp[i].title, "num": resp[i].hot, "flag": ""})
				}
				this.loading = false;
				this.showLoadingMore = false;
				this.weibomsg = hotarr;
			});
		},
		getecharts() {
			var that = this;
			const chart1 = this.$refs.chart1
			if (chart1) {
				const myChart = this.$echarts.init(chart1)
				let color = ['#ff5b01', '#b2db9f', '#fcd88a', '#f49495', '#77be9e', '#fda985', '#b891cc', '#efa4db', '#ff5b01', '#b2db9f'];
				const option1 = {

					tooltip: {
						trigger: 'axis',
						formatter: function (params) {
							var string = "";
							if (params[0].dataIndex === 0) {
								if (that.nameHeatList1.length > 0) {
									for (var i = 0; i < that.nameHeatList1.length; i++) {
										string += "<div style='width: 7px;height: 7px;border-radius: 10px;display: inline-block;background-color: " + color[i] + ";margin-right: 5px'></div>" + that.nameHeatList1[i] + "<span style='margin-left: 5px'>" + params[i].data + " 万</span>" + '<br>'
									}
								}
								return string;
							} else if (params[0].dataIndex === 1) {
								if (that.nameHeatList2.length > 0) {
									for (var i = 0; i < that.nameHeatList2.length; i++) {
										string += "<div style='width: 7px;height: 7px;border-radius: 10px;display: inline-block;background-color: " + color[i] + ";margin-right: 5px'></div>" + that.nameHeatList2[i] + "<span style='margin-left: 5px'>" + params[i].data + " 万</span>" + '<br>'
									}
								}
								return string;
							} else if (params[0].dataIndex === 2) {
								if (that.nameHeatList3.length > 0) {
									for (var i = 0; i < that.nameHeatList3.length; i++) {
										string += "<div style='width: 7px;height: 7px;border-radius: 10px;display: inline-block;background-color: " + color[i] + ";margin-right: 5px'></div>" + that.nameHeatList3[i] + "<span style='margin-left: 5px'>" + params[i].data + " 万</span>" + '<br>'
									}
								}
								return string;
							} else if (params[0].dataIndex === 3) {
								if (that.nameHeatList4.length > 0) {
									for (var i = 0; i < that.nameHeatList4.length; i++) {
										string += "<div style='width: 7px;height: 7px;border-radius: 10px;display: inline-block;background-color: " + color[i] + ";margin-right: 5px'></div>" + that.nameHeatList4[i] + "<span style='margin-left: 5px'>" + params[i].data + " 万</span>" + '<br>'
									}
								}
								return string;
							} else if (params[0].dataIndex === 4) {
								if (that.nameHeatList5.length > 0) {
									for (var i = 0; i < that.nameHeatList5.length; i++) {
										string += "<div style='width: 7px;height: 7px;border-radius: 10px;display: inline-block;background-color: " + color[i] + ";margin-right: 5px'></div>" + that.nameHeatList5[i] + "<span style='margin-left: 5px'>" + params[i].data + " 万</span>" + '<br>'
									}
								}
								return string;
							} else if (params[0].dataIndex === 5) {
								if (that.nameHeatList6.length > 0) {
									for (var i = 0; i < that.nameHeatList6.length; i++) {
										string += "<div style='width: 7px;height: 7px;border-radius: 10px;display: inline-block;background-color: " + color[i] + ";margin-right: 5px'></div>" + that.nameHeatList6[i] + "<span style='margin-left: 5px'>" + params[i].data + " 万</span>" + '<br>'
									}
								}
								return string;
							} else if (params[0].dataIndex === 6) {
								if (that.nameHeatList7.length > 0) {
									for (var i = 0; i < that.nameHeatList7.length; i++) {
										string += "<div style='width: 7px;height: 7px;border-radius: 10px;display: inline-block;background-color: " + color[i] + ";margin-right: 5px'></div>" + that.nameHeatList7[i] + "<span style='margin-left: 5px'>" + params[i].data + " 万</span>" + '<br>'
									}
								}
								return string;
							}

							return "";
						},
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						},
					},
					legend: {
						show: false,
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							type: 'category',
							boundaryGap: false,
							data: this.heatMovesDay
						}
					],
					yAxis: [
						{
							type: 'value',
							name: "单位（万）",
						}
					],
					series: this.heatMovesData
				}

				myChart.setOption(option1)
				this.myChart = myChart
				window.addEventListener("resize", function () {
					myChart.resize()
				})
			}
			//第二个图表
			const chart2 = this.$refs.chart2
			if (chart2) {

				const myChart = this.$echarts.init(chart2)
				const option2 = {
					xAxis: {
						type: 'category',
						data: ['2021-09-20', '2021-09-21', '2021-09-22', '2021-09-23', '2021-09-24', '2021-09-25', '2021-09-26', '2021-09-27', '2021-09-28']
					},
					yAxis: {
						name: "单位（万）",
					},
					visualMap: {
						show: false,
						min: 0,
						max: 100,
						splitNumber: 20,
						inRange: {
							color: ['#5eb5e2', '#5eb5e2', '#5eb5e2'].reverse()
						},
						textStyle: {
							color: '#fff'
						}
					},
					series: [
						{
							symbolSize: 20,
							data: [
								[10.0, 8.04],
								[8.07, 6.95],
								[13.0, 7.58],
								[9.05, 8.81],
								[11.0, 8.33],
								[14.0, 7.66],
								[13.4, 6.81],
								[10.0, 6.33],
								[14.0, 8.96],
								[12.5, 6.82],
								[9.15, 7.2],
								[11.5, 7.2],
								[3.03, 4.23],
								[12.2, 7.83],
								[2.02, 4.47],
								[1.05, 3.33],
								[4.05, 4.96],
								[6.03, 7.24],
								[12.0, 6.26],
								[12.0, 8.84],
								[7.08, 5.82],
								[5.02, 5.68],
								[4.05, 4.96],
								[6.03, 7.24],
								[12.0, 6.26],
								[12.0, 8.84],
								[7.08, 5.82],
								[5.02, 5.68]
							],
							type: 'scatter'
						}
					]
				}

				myChart.setOption(option2)

				window.addEventListener("resize", function () {
					myChart.resize()
				})
			}
		},
		changeStyle(value) {
			if (value == 1) {
				this.typeId = 0;
				this.getIndexMiddle();
			}
			if (value == 2) {
				this.typeId = 1;
				this.getIndexMiddle();
			}
			if (value == 3) {
				this.typeId = 2;
				this.getIndexMiddle();
			}
			if (value == 4) {
				this.typeId = 3;
				this.getIndexMiddle();
			}
		},

		hideModal(checkedValues) {
			if (this.warningForm.taskName == '' || this.warningForm.taskName == null || this.warningForm.taskName == undefined) {
				this.$message.error('请输入任务名称');
				return;
			}
			if (this.warningForm.taskName.trim().length == 0) {
				this.$message.error('请正确输入任务名称');
				return;
			}
			if (this.warningForm.warningKeyword == '' || this.warningForm.warningKeyword == null || this.warningForm.warningKeyword == undefined) {
				this.$message.error('请输入添加预警关键词');
				return;
			}
			if (this.warningForm.warningKeyword.length > 10) {
				this.$message.error('请正确输入预警关键词');
				return;
			}
			let reg = new RegExp("[`~!%@#$^&*()=|{}':;',\\[\\]<>《》/?~！@#￥……&*（）|{}【】‘；：”“'\"。，、？]");
			if (reg.test(this.warningForm.warningKeyword)) {
				this.$message.error("预警关键词不能输入特殊字符")
				return;
			}
			if (this.warningForm.warningPlatform == '' || this.warningForm.warningPlatform == null || this.warningForm.warningPlatform == undefined) {
				this.$message.error('请输入添加预警平台');
				return;
			}
			if (this.warningForm.rank == '' || this.warningForm.rank == null || this.warningForm.rank == undefined) {
				this.$message.error('请输入添加预警形式');
				return;
			}
			if (this.warningForm.startTime == '' || this.warningForm.startTime == null || this.warningForm.startTime == undefined) {
				this.$message.error('请输入预警起始时间');
				return;
			}
			if (this.warningForm.endTime == '' || this.warningForm.endTime == null || this.warningForm.endTime == undefined) {
				this.$message.error('请输入预警结束时间')
				return;
			}
			let start = new Date(this.warningForm.startTime)
			let end = new Date(this.warningForm.endTime)
			if (start.getTime() > end.getTime()) {
				this.$message.error('起始时间不可以大于结束时间，请重新输入！')
				return;
			}
			console.log(this.warningForm.warningType)
			console.log(this.warningForm.hitRule)
			if (this.warningForm.warningPush && (this.warningForm.warningType == '' || this.warningForm.hitRule == '')) {
				this.$message.error('开启预警推送时，预警类型和命中规则为必填')
				return;
			}
			if (this.warningForm.warningPush && (this.warningForm.hitRule == 0)) {
				this.$message.error('命中规则大于0')
				return;
			}
			if (!this.warningForm.hitRule) {
				this.warningForm.hitRule = ''
			}
			this.warningForm.hitRule = this.warningForm.hitRule.replace(/\b(0+)/gi, "")
			// 添加预警
			addWarning({
				taskName: this.warningForm.taskName,
				warningKeyword: this.warningForm.warningKeyword,
				warningPlatform: this.warningForm.warningPlatform.join(","),
				rank: this.warningForm.rank,
				startTime: this.warningForm.startTime ? this.warningForm.startTime.format('YYYY-MM-DD HH:mm:ss') : '',
				endTime: this.warningForm.endTime ? this.warningForm.endTime.format('YYYY-MM-DD HH:mm:ss') : '',
				warningPush: this.warningForm.warningPush ? 1 : 0,
				subscribe: this.warningForm.subscribe ? 1 : 0,
				warningType: this.warningForm.warningType,
				hitRule: this.warningForm.hitRule,

			}).then(res => {
				if (res.status == 200) {
					this.$message.success('规则创建成功！日志正在生成中，请等待...');
					this.searchData()
					this.warningForm = {}
				} else {
					this.$message.error('执行失败');
				}
			});
			this.visible = false;
			this.warningFlag = Math.floor(Math.random() * (100 - 1)) + 1;

		},

		onChange(checkedValues) {
			console.log('checked = ', checkedValues);
			console.log('checked = ', checkedValues.length);

			this.label = checkedValues;
		},

		suyuan() {
			this.$router.push({
				path: '/generalDetectionroots',

			})
		},
		suyuanNews() {
			this.$router.push({
				path: '/generalDetectionNewsroots',

			})
		},
		deleteHotTrackWarning(id) {
			let params = {
				id: id
			}
			confirm('确定删除该记录吗？', () => {
				deleteHotTrackWarningAdd(
						params
				).then(res => {
					if (res.status == 200) {
						this.$message.success('删除成功');
						this.searchData()
					} else {
						this.$message.error('删除失败');
					}
				})
			})

		},
		changePageInfo(commandId) {
			this.$router.push({
				path: '/hotspottrackingInfoThreePage',
				query: {commandId: commandId}
			})
		},

		/*删除*/
		deleteinfomation() {
			this.$message.success("删除成功");
		},
		showOtherMedia() {
			this.collspanMedia = !this.collspanMedia;
		},

		tuisong() {
			this.$message.success("推送成功");
		},
		subscribe() {
			this.$message.success("订阅成功");
		},
		collection() {
			this.$message.success("收藏成功");
		},
		callback(tag) {
			if (tag == 1) {
				this.change = 1;
			}
			if (tag == 2) {
				this.change = 2;


			}
		},
		getUnit(arg) {
			if (arg.toString().length >= 13) {
				return "万亿"
			} else if (arg.toString().length >= 9) {
				return "亿"
			} else if (arg.toString().length >= 4) {
				return "万"
			} else {
				return ""
			}
		}


	},
	filters: {
		//取截单元,单位
		playvolume: function (arg) {
			if (arg.toString().length >= 13) {
				const volume = arg / 1000000000000
				const realVal = parseFloat(volume).toFixed(0);
				return realVal + "万亿"
			} else if (arg.toString().length >= 9) {
				const volume = arg / 100000000
				const realVal = parseFloat(volume).toFixed(0);
				return realVal + "亿"
			} else if (arg.toString().length >= 4) {
				const volume = arg / 10000
				const realVal = parseFloat(volume).toFixed(0);
				return realVal + "万"
			} else {
				return arg
			}
		},
		playvolume2: function (arg) {
			if (arg.toString().length >= 13) {
				const volume = arg / 1000000000000
				const realVal = parseFloat(volume).toFixed(3);
				return realVal
			} else if (arg.toString().length >= 9) {
				const volume = arg / 100000000
				const realVal = parseFloat(volume).toFixed(3);
				return realVal
			} else if (arg.toString().length >= 4) {
				const volume = arg / 10000
				const realVal = parseFloat(volume).toFixed(3);
				return realVal
			} else {
				return arg
			}
		},
		NumFormat: function (value) {
			if (!value) return '0'
			let format = value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
			return format
		}
	},
	mounted() {

		// getRuleId().then(res => {
		// 	// 如果角色是普通业务人员
		// 	if (res.data != "ROLE.ORDINARY.BUSINESS") {
		// 		this.ruleFlag = 1;
		// 	}
		// });


		let ff = new Date()
		var sdtime3 = new Date().setDate((new Date().getDate() - 13))//7天
		let dd = new Date(new Date().toLocaleDateString())
		let ss = new Date(sdtime3)

		let param = {

			page: this.pagination.current,
			pageNumber: this.pagination.pageSize,
			orderField: "createTime",
			orderType: 2,
			queryData: {
				"id": 0,
				"taskName": "",
				"warningKeyword": "",
				"warningPlatform": "",
				"rank": 0,
				"startTime": "",
				"endTime": "",
				"warningPush": 0,
				"subscribe": 0,
				"flag": 0,
				"status": "",
				"userId": 0,
				"permissionGroupId": 0,
				"limitNum": 0,
				"ruleStatus": 0,
				"commandId": "",
				"updateTime": ""
			},
		}

		getHotTrackWarningAddList(
				param
		).then(res => {
			this.listData = res.data.records;
			this.pagination.total = res.data.total;
			this.total = res.data.total;
		})


		if (this.$route.query.flag == 2) {
			document.querySelector("div[role=tab]:last-child").click();
		}
		let color = ['#ff5b01', '#b2db9f', '#fcd88a', '#f49495', '#77be9e', '#fda985', '#b891cc', '#efa4db', '#ff5b01', '#b2db9f'];

		const hexToRgba = (hex, opacity) => {
			let rgbaColor = "";
			let reg = /^#[\da-f]{6}$/i;
			if (reg.test(hex)) {
				rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
						"0x" + hex.slice(3, 5)
				)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
			}
			return rgbaColor;
		}
		if (this.$route.query.change == 2) {
			this.change = 2
		}

	},


}

// 获取指定日期的前几天后几天 day 传-1表始前一天，传1表始后一天
function getNextDate(date, day) {
	var dd = new Date(date);
	dd.setDate(dd.getDate() + day);
	var y = dd.getFullYear();
	var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
	var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
	return y + "-" + m + "-" + d;
};


function getyymm(date) {
	//获取年份
	var yy = date.getFullYear();
	//获取月份
	var mm = date.getMonth() + 1;
	//如果月份小于10 前面加0
	mm = (mm < 10 ? "0" + mm : mm);
	//日
	var day = date.getDate();
	day = (day < 10 ? "0" + day : day);
	//返回日期
	return (yy.toString() + "-" + mm.toString() + "-" + day.toString());
}

function abc(param) {
	if (param.length > 0) {
		if (param.length == 7) {
			return param
		} else {
			for (var i = 0; i < 7 - param.length; i++) {
				param.push(0)
			}
			return param
		}
	} else {
		return [0, 0, 0, 0, 0, 0, 0]
	}
}
</script>

<style scoped lang="scss">
/deep/ .ant-list-item-action {
	height: 26.5px;
}

* {
	scrollbar-color: #d5d8e6 #f5f5f5;
	scrollbar-width: thin;
}

/deep/ .select01 .ant-select {
	width: 116px;
}


/deep/ .ant-form-item-label {
	margin-top: -16px;
	margin-left: 55px
}

/deep/ .ant-form-item-control {
	text-align: left;
	line-height: 30px;
	margin-top: -47px;
	margin-left: 132px;
	width: 30px;
}

.modal-box /deep/ .ant-modal-body {
	height: 700px;
}

.modal-box /deep/ .ant-modal-content {
	height: 500px;
}

/deep/ .addWarning {
	margin: 0;
	padding: 0;
}

/deep/ .addWarning .ant-form-item-label {
	margin-top: 0px;
	margin-left: 0px;
}

/deep/ .addWarning .ant-form-item-control {
	text-align: unset;
	line-height: 30px;
	margin-top: 0px;
	margin-left: 0px;
	width: auto;
	padding-top: 0px;
}

/deep/ .ant-progress-text {
	display: none;
}

/deep/ .ant-progress-bg {
	height: 18px
}

.chart0 {
	height: 504px;
	width: 1063px;
	/*height:90%;width:100%;*/
	border: 1px solid #eeeeee;
	margin: 10px;
	margin-right: 20px
}

.chart1 {
	height: 90%;
	width: 100%;
	border: 1px solid #eeeeee;
	margin: 10px;
	margin-right: 20px;
	display: flex;
	flex-wrap: wrap
}

.button01 {
	padding-right: 8px;
	padding-left: 8px;
	margin-right: 20px;
	width: 50%;
	background-color: #e8f1ff;
	display: flex;
	justify-content: space-around;
	padding-top: 8px;
	padding-bottom: 8px
}

/deep/ .ant-list-split .ant-list-item {
	border-bottom: 1px solid #f7f7f7;
	margin-left: 20px;
	margin-right: 10px
}

/deep/ .ant-list-pagination {
	padding-bottom: 2%;
}

/deep/ .ant-list-item-meta-title {
	margin-bottom: 4px;
	color: rgba(0, 0, 0, 0.65);
	font-size: 14px;
	line-height: 17px;
}

/deep/ .top10_list.ant-list {
	line-height: 0.5px
}

/deep/ .ant-list-item {
	padding: 9.5px 0;
}

.changeStyle {
	background-color: #2F45B0;
	/* padding:2px;
	 padding-left:6px;
	 padding-right:6px;*/
	color: white;
	border-radius: 10%;
	font-size: 14px

}

.changeStyles {
	background-color: #1470f2;
	/*  padding:2px;
		padding-left:6px;
		padding-right:6px;*/
	color: white;
	border-radius: 10%;


}

.main {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 40px;
	margin-right: 40px;
}

.addyj {
	margin-left: 73%;
	margin-bottom: -20px;
	padding: 6px;
	background: url("../../assets/images/generalDetection/addChart.png") left center no-repeat;
	border-radius: 5px;
	background-position: 10px;
	cursor: pointer;
}

.one {
	background-color: #f7f7f7;
	display: flex;
	height: 65px;
	width: 100%;
}

.one_left {
	width: 70%;
	display: flex;
	//justify-content: space-around;
}

.one_right {
	width: 30%;
	display: flex;
	justify-content: space-around;
	margin-top: 20px;
	margin-bottom: 21px;
	font-size: 14px
}

.two {
	display: flex;
	height: 550px;
	width: 100%;
}

.two_left {
	width: 68%;
	display: flex;
	flex-wrap: wrap;

}

.two_right {
	width: 32%;
	display: flex;
	flex-wrap: wrap;
}

.three {
	height: 560px;
	display: flex;
	width: 100%
}

.three_left {
	width: 68%;
	display: flex;
	flex-wrap: wrap;

}

.three_right {
	width: 32%;
	display: flex;
	flex-wrap: wrap;
}

.modal-box /deep/ .ant-modal-body {
	min-height: 500px;
}

.modal-box /deep/ .ant-modal-content {
	height: 600px;
}

.right-content {
	margin-bottom: 40px;

	.ant-row {
		height: 50px;
		line-height: 50px;

		.content-left {
			text-align: right;
			font-size: 14px;
			height: 100%;
		}

		.content-right {
			float: right;
			height: 100%;
			position: relative;
			left: -30px;

			.ant-input {
				width: 480px;
				height: 40px;
				border-radius: 3px;
			}
		}
	}
}

/deep/ .ant-tabs-bar {
	border-bottom: 0px solid #e8e8e8 !important;
}

/deep/ .ant-tabs-tab {
	font-size: 15px !important;
}


/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > div {
	color: black;
	font-size: 13px;
	cursor: pointer;
}

.changebuttonStyle {
	background: #1577FF;
	padding: 0 10px;
	height: 25px;
	color: #fff;
	border-radius: 5px;
	line-height: 25px;
	cursor: pointer;
}

.divtext {
	border: solid #F0F0F0 1px;
	text-align: center;
	padding-left: 1%;
	padding-right: 1%;
	margin-right: 1%;
}

.titleDiv {
	height: 40px;
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	margin-left: 30px;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

.backButton {
	height: 40px;
	width: 80px;
	align-items: center;
	line-height: 40px;
	border: 1px solid #E6E6E6;
	text-align: center;
	margin-right: 50px;
	border-radius: 10px;
	cursor: pointer;
}

@media screen and (max-device-width: 2560px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

@media screen and (max-device-width: 1920px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}
</style>
